<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <!-- 简单的文本差值 -->
    <div id="app">
      {{ message }}<br />
      {{ name }}
    </div>
    <script type="text/javascript">
      var app = new Vue({
        // 元素（视图）
        el: "#app",
        // 数据
        data: {
          message: "Hello Vue!",
          name: "Test!!!",
        },
      });
    </script>

    <!-- 属性绑定值 -->
    <!-- v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message 属性保持一致”。 -->
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒查看此处动态绑定的提示信息！
      </span>
    </div>
    <script type="text/javascript">
      var app2 = new Vue({
        el: "#app-2",
        data: {
          message: "页面加载于" + new Date().toLocaleString(),
        },
      });
    </script>

    <!-- 条件与循环 -->
    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    <script type="text/javascript">
      new Vue({
          el: '#app-3',
          data: {
              seen: false
          }
      });
    </script>
  </body>
</html>
